let currentId = parseInt(window.location.search.split('=')[1]);
let currentIndex = caseDataList.findIndex(item => item.id === currentId);
let prevBtn = document.getElementById('prevBtn');
let nextBtn = document.getElementById('nextBtn');
let detailContent = document.getElementById('detailContent');

function renderDetail() {
    let currentData = caseDataList[currentIndex];
    detailContent.innerHTML = `
                <p>${currentData.title}</p>
                <img src="./assets/${currentData.details.detailImg}" alt="Detail Image">
                <ul>
                    ${currentData.details.detailTits.map(tit => `<li>${tit}</li>`).join('')}
                </ul>`;

    if (currentIndex === 0) {
        prevBtn.style.opacity = '0';
    } else {
        prevBtn.style.opacity = '1';
        prevBtn.onclick = function () {
            window.location.href = `casesDetails.html?id=${caseDataList[currentIndex - 1].id}`;
        };
    }

    if (currentIndex === caseDataList.length - 1) {
        nextBtn.style.opacity = '0';
    } else {
        nextBtn.style.opacity = '1';
        nextBtn.onclick = function () {
            window.location.href = `casesDetails.html?id=${caseDataList[currentIndex + 1].id}`;
        };
    }
}

renderDetail();